.wraper {
    width: 100%;
    box-sizing: border-box;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wraper.pc {
    height: 640px;

    .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        border-radius: 8px;
        background: rgb(255 255 255 / 50%);
        opacity: 1;
        margin: 0 2px;
    }
    
    .swiper-pagination-bullet-active {
        width: 32px;
        border-radius: 23px;
        background: #FFF;
    }
}

.wraper.mobile {
    height: 212px;

    .swiper-pagination-bullet {
        width: 4px;
        height: 4px;
        border-radius: 4px;
        background: rgb(255 255 255 / 30%);
        opacity: 1;
        margin: 0 2px;
    }
    
    .swiper-pagination-bullet-active {
        width: 10px;
        border-radius: 23px;
        background: #FFF;
    }
}
